<template>
  <div class="productLine">
    <div class="tempxyz rightTable">
      <CCard class="rightCard">
        <CCardHeader class="header-wraper">
          <div class="header-left-titleWraper">
            <span class="textTitle">版本列表</span>
          </div>
          <div class="header-right-wraper">
            <CButton color="info" @click="addVersion"  data-permission="Btn_banben_add" class="system-btn-style">
              <CIcon name="cil-plus" />&nbsp;版本
            </CButton>
          </div>
        </CCardHeader>
        <CCardBody class="card-body">
          <div style="height: calc(100% - 45px)">
            <TableList ref="table" :getColumn="getColumns" :getAxios="getAxios">
              <template v-slot:show_details="item">
                <CButton
                  title="详情"
                  variant="outline"
                  class="textBtnStyle onButton system-btn-style"
                  @click="getInfo(item.data.row)"
                >
                  详情
                </CButton>
                <CButton
                  title="编辑"
                  variant="outline"
                  class="textBtnStyle onButton system-btn-style"
                  @click="update(item.data.row)"
                  data-permission="Btn_banben_bianji"
                  >编辑</CButton
                >
                <CButton
                  title="删除"
                  variant="outline"
                  class="textBtnStyle onButton system-btn-style"
                  @click="del(item.data.row.id)"
                  data-permission="Btn_banben_delect"
                  >删除</CButton
                >
              </template>
            </TableList>
          </div>
        </CCardBody>

        <!--     <CCardBody>
          <div class="version borderStyle">
            <CDataTable
              :items="data"
              :key="data"
              :fields="fields"
              hover
              border
              class="versionMangeTable"
            >
              <template #show_details="{item}">
                <td class="py-2">
                  &lt;!&ndash; <CButton
                    v-c-tooltip="'详情'"
                    title="详情"
                    variant="outline"
                    style="margin-right: 5px"
                    @click="getInfo(item)"
                  >
                    <CIcon class="colortempstyle" name="cil-line-spacing" />
                  </CButton>
                  <CButton
                    v-c-tooltip="'编辑'"
                    title="编辑"
                    color="rgb(2,40,88)"
                    variant="outline"
                    style="margin-right: 5px"
                    @click="update(item)"
                  >
                    <img class="featuresstyle" src="@/assets/icons/edit.svg" alt />
                  </CButton>
                  <CButton
                    v-c-tooltip="'删除'"
                    title="删除"
                    color="rgb(2,40,88)"
                    variant="outline"
                    style="margin-right: 5px"
                    @click="del(item.id)"
                  >
                    <img class="featuresstyle" src="@/assets/icons/delete.svg" alt />
                  </CButton> &ndash;&gt;
                  <CButton
                    title="详情"
                    variant="outline"
                    class="textBtnStyle"
                    @click="getInfo(item)"
                  >
                  详情
                  </CButton>
                  <CButton
                    title="编辑"
                    variant="outline"
                    class="textBtnStyle"
                    @click="update(item)"
                  >
                  编辑
                  </CButton>
                  <CButton
                    title="删除"
                    variant="outline"
                    class="textBtnStyle"
                    @click="del(item.id)"
                  >
                  删除
                  </CButton>
                </td>
              </template>
            </CDataTable>
          </div>
        </CCardBody>
        <CCardFooter class="page-link">
          <CRow>
            <CCol class="footerPage">
              <span class="pageContent">
                每页
                <CSelect
                  @change="getVendorId($event)"
                  :options="[10,15,20,25]"
                  v-model="pageSize"
                  class="selectStyle"
                  style
                />
                条记录。第{{this.currentPage}}页(总共{{this.total}}页，{{this.allNum}}条记录)
              </span>
              <CPagination
                :activePage.sync="currentPage"
                :pages="total"
                align="end"
                v-if="total != 0"
              />
            </CCol>
          </CRow>
        </CCardFooter>-->
      </CCard>
    </div>
    <Modal
      v-model="getShow"
      draggable
      scrollable
      title="版本信息"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">版本信息</p>
      <h5>当前版本：{{ this.versionInfo.version }}</h5>
      <h5>更新时间：{{ this.versionInfo.updateTime }}</h5>
      <h5>更新内容：</h5>
      <p v-for="(item, i) in this.curContents" :key="i">
        {{ i + 1 }}. {{ item }}
      </p>
      <template #footer class="footerBtns">
        <!-- <CButton @click="getCancel" color="info" class="cancel-btn"
          >取消</CButton
        > -->
        <CButton @click="getOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal v-model="addShow" draggable scrollable title="新增版本信息">
      <p slot="header" class="modalHeader">新增版本信息</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="版本号"
              placeholder="请输入版本号"
              :value.sync="versionInfo.version"
              horizontal
              v-model="versionInfo.version"
              class="labelVersion"
            />
            <div class="cinputstyle">
              <CButton
                class="btnstyle1"
                v-c-tooltip="'添加更新内容'"
                title="添加更新内容"
                variant="outline"
                color="info"
                @click="addNewContent"
                >添加内容</CButton
              >
              <div style="margin-top: 10px">
                <CDataTable
                  :items="curContents"
                  :fields="fields2"
                  hover
                  pagination
                  border
                  class="featureDataList"
                >
                  <template #content="{ item }">
                    <td>
                      <CInput :value.sync="item.content" />
                    </td>
                  </template>

                  <template #show_details="{ item }">
                    <td class="py-2">
                      <!-- <CButton
                        v-c-tooltip="'删除'"
                        title="删除"
                        color="rgb(2,40,88)"
                        variant="outline"
                        style="margin-right: 5px"
                        @click="delContent(item.content)"
                      >
                        <img class="featuresstyle" src="@/assets/icons/delete.svg" alt />
                      </CButton> -->
                      <CButton
                        title="删除"
                        variant="outline"
                        class="textBtnStyle system-btn-style"
                        @click="delContent(item.content)"
                      >
                        删除
                      </CButton>
                    </td>
                  </template>
                </CDataTable>
              </div>
            </div>
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="addCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="addOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal v-model="updateShow" draggable scrollable title="修改版本信息">
      <p slot="header" class="modalHeader">修改版本信息</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="版本号"
              placeholder="请输入版本号"
              :value.sync="updateVersion"
              horizontal
              v-model="updateVersion"
              class="labelVersion"
            />
            <div class="cinputstyle">
              <CButton
                class="btnstyle1"
                v-c-tooltip="'添加更新内容'"
                title="添加更新内容"
                variant="outline"
                color="info"
                @click="addNewContent"
                >添加内容</CButton
              >
              <div style="margin-top: 10px">
                <CDataTable
                  :items="updateCurContents"
                  :fields="fields2"
                  hover
                  pagination
                  border
                  class="featureDataList"
                >
                  <template #content="{ item }">
                    <td>
                      <CInput :value.sync="item.content" />
                    </td>
                  </template>

                  <template #show_details="{ item }">
                    <td class="py-2">
                      <!-- <CButton
                        v-c-tooltip="'删除'"
                        title="删除"
                        color="rgb(2,40,88)"
                        variant="outline"
                        style="margin-right: 5px"
                        @click="delContent(item.content)"
                      >
                        <img class="featuresstyle" src="@/assets/icons/delete.svg" alt />
                      </CButton> -->
                      <CButton
                        title="删除"
                        variant="outline"
                        class="textBtnStyle system-btn-style"
                        @click="delContent(item.content)"
                      >
                        删除
                      </CButton>
                    </td>
                  </template>
                </CDataTable>
              </div>
            </div>
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="updateCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="updateOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="delShow"
      draggable
      scrollable
      title="删除版本信息"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除版本信息</span>
      </p>
      <div class="modalBody">
        <p>您正在删除该版本记录信息</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="delContentShow"
      draggable
      scrollable
      title="删除单条内容"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除单条内容</span>
      </p>
      <div class="modalBody">
        <p>您正在删除该条内容信息</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delContentCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delContentOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
  </div>
</template>

<script>
const fields = [
  {
    label: "序号",
    key: "number",
    _style: "width:60px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "版本号",
    key: "version",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "更新时间",
    key: "updateTime",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "更新内容",
    key: "content",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    key: "show_details",
    label: "操作",
    _style: "width:200px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
];
const fields2 = [
  {
    label: "更新内容",
    key: "content",
    _style: "width:80%;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "操作",
    key: "show_details",
    _style: "width:20%;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
];
import TableList from "@/template/table/TableList";

export default {
  name: "versionManage",
  components: { TableList },
  data() {
    return {
      modalStyle: { top: "250px" },
      delShow: false,
      delContentShow: false,
      updateShow: false,
      getShow: false,
      addShow: false,
      data: [],
      item: {},
      clickId: -1,
      total: 0,
      currentPage: 1,
      fields,
      fields2,
      pageSize: 25,
      allNum: 0,
      versionInfoList: [],
      versionInfo: {
        version: "",
        updateTime: "",
        content: "",
      },
      curContents: [],
      delContentInfo: "",
      updateVersion: "",
      updateCurContents: [],
      isUpdate: false,

      getColumns: [
        {
          title: "版本号",
          key: "version",
          width: 180,
          className: "centerText",
        },
        {
          title: "更新时间",
          key: "updateTime",
          width: 180,
          className: "centerText",
        },
        {
          title: "更新内容",
          key: "content",
          className: "centerText",
        },
        {
          key: "show_details",
          slot: "show_details",
          title: "操作",
          width: 320,
          className: "centerText",
        },
      ],
      getAxios: {
        url: this.$api.manageApi.getAll, //请求路径
        method: "get", //请求方式
        dataList: {}, //请求参数
      },
    };
  },
  mounted() {
    //this.getVersionList();
  },
  methods: {
    addNewContent() {
      let addContent = {
        content: "",
      };
      if (this.isUpdate) {
        this.updateCurContents.push(addContent);
      } else {
        this.curContents.push(addContent);
      }
    },
    delContent(content) {
      this.delContentShow = true;
      this.delContentInfo = content;
    },
    getVendorId(event) {
      let tempdata = event.target.value; //获取option对应的value值
      this.pageSize = parseInt(tempdata);
      this.getVersionList();
    },
    getInfo(val) {
      this.clickId = val.id;
      this.versionInfo = val;
      this.curContents = this.versionInfo.content.split(";");
      this.getShow = true;
    },
    addVersion() {
      this.versionInfo = {
        version: "",
        content: "",
      };
      this.curContents = [];
      let addContent = {
        content: "",
      };
      this.curContents.push(addContent);
      this.isUpdate = false;
      this.addShow = true;
    },
    addOk() {
      let self = this;
      let addContent = "";
      for (let info of self.curContents) {
        if (addContent == "") {
          addContent = info.content;
        } else {
          addContent += ";";
          addContent += info.content;
        }
      }

      let date = new Date();
      let month = date.getMonth() + 1;
      let updateTime =
        date.getFullYear() +
        "-" +
        month +
        "-" +
        date.getDate() +
        " " +
        date.getHours() +
        ":" +
        date.getMinutes() +
        ":" +
        date.getSeconds();

      self.versionInfo.content = addContent;
      self.versionInfo.updateTime = updateTime;
      let path = this.$api.manageApi.create;

      this.http.post(path, self.versionInfo).then((res) => {
        if (res.data.success) {
          this.addShow = false;
          this.versionInfo = {
            version: "",
            updateTime: "",
            content: "",
          };
          this.$Message.success(res.data.message);
          this.getVersionList();
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    addCancel() {
      this.addShow = false;
    },
    getOk() {
      this.getShow = false;
    },
    getCancel() {
      this.getShow = false;
    },
    getVersionList() {
      let self = this;
      let path = self.$api.manageApi.getAll;
      let param = {
        pageNum: self.currentPage,
        pageSize: self.pageSize,
      };

      let getAxiosData = {
        method: "get",
        url: path,
      };
      this.$refs.table.getRefreshTable(param, getAxiosData);

      // this.http.get(path, param).then((res) => {
      //   self.allNum = res.data.data.length;
      //   if (res.data.success) {
      //     self.total = Math.ceil(res.data.data.length / self.pageSize);
      //     self.data = res.data.data;
      //     for (let i = 0; i < self.data.length; i++) {
      //       self.data[i].number =
      //         (self.currentPage - 1) * self.pageSize + i + 1;
      //     }
      //   } else {
      //     this.$Message.error(res.data.message);
      //   }
      // });
    },
    update(val) {
      let self = this;
      self.clickId = val.id;

      self.updateCurContents = [];
      self.updateVersion = val.version;
      let tmpContents = val.content.split(";");
      for (let i = 0; i < tmpContents.length; i++) {
        let tempContent = {
          content: tmpContents[i],
        };
        self.updateCurContents.push(tempContent);
      }

      self.isUpdate = true;
      self.updateShow = true;
    },
    del(id) {
      this.delShow = true;
      this.clickId = id;
    },
    updateOk() {
      let self = this;

      let updateContent = "";
      for (let info of self.updateCurContents) {
        if (updateContent == "") {
          updateContent = info.content;
        } else {
          updateContent += ";";
          updateContent += info.content;
        }
      }

      let date = new Date();
      let month = date.getMonth() + 1;
      let updateTime =
        date.getFullYear() +
        "-" +
        month +
        "-" +
        date.getDate() +
        " " +
        date.getHours() +
        ":" +
        date.getMinutes() +
        ":" +
        date.getSeconds();

      let path = this.$api.manageApi.update + "/" + self.clickId;
      let param = {
        version: self.updateVersion,
        updateTime: updateTime,
        content: updateContent,
      };

      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          this.updateShow = false;
          this.updateVersion = "";
          this.updateCurContents = [];

          this.$Message.success(res.data.message);
          this.getVersionList();
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    updateCancel() {
      this.updateShow = false;
    },
    delOk() {
      let self = this;
      let path = this.$api.manageApi.delete + "/" + self.clickId;

      this.http.delete(path).then((res) => {
        this.delShow = false;
        if (res.data.success) {
          this.$Message.success(res.data.message);
          self.getVersionList();
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    delCancel() {
      this.delShow = false;
    },
    delContentOk() {
      let self = this;
      let delInfo;

      let data = self.curContents;
      if (this.isUpdate) {
        data = this.updateCurContents;
      }
      for (let info of data) {
        if (info.content == self.delContentInfo) {
          delInfo = info;
        }
      }
      let index = data.indexOf(delInfo);
      if (index > -1) {
        data.splice(index, 1);
      }

      this.delContentShow = false;
    },
    delContentCancel() {
      this.delContentShow = false;
    },
  },
  watch: {
    // currentPage(newVal, oldVal) {
    //   this.currentPage = newVal;
    //   this.getVersionList();
    // },
    // pageSize(newVal, oldVal) {
    //   this.pageSize = newVal;
    //   this.getVersionList();
    // },
  },
};
</script>

<style scoped>
.col-xl-12 {
  padding-left: 20px;
  padding-right: 20px;
}

.footerPage {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  color: #151517 !important;
  /* margin-right: 10px; */
}
.pageContent {
  margin-right: 26px;
  font-size: 14px;
}
.selectStyle {
  display: inline-block;
  width: 100px;
  margin-right: 5px;
}

.page-link:hover {
  background-color: #ffffff;
  border-color: #ffffff;
}

.versionMangeTable {
  height: 100%;
  overflow-y: auto;
}
.version {
  height: calc(100% - 52px);
  overflow-y: auto;
}
.featureDataList {
  height: 466px;
  overflow-y: auto;
}
.labelVersion {
  margin-left: 12px;
}
</style>
<style scoped>
/deep/.ivu-table td.centerText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  text-align: -moz-center;
  text-align: -webkit-center;
}

.onButton:hover {
  color: white;
}
</style>
